<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .canvas {
        border: 1px solid gray;
      }
    </style>
  </head>
  <body>
    <canvas class="canvas" width="500" height="500"></canvas>

    <script type="module">
      import initShader from "./utils/initShader.js";
      import vertex from "./shader/09/vertex.glsl?raw";
      import fragment from "./shader/09/fragment.glsl?raw";
      // 获取canvas
      const canvas = document.querySelector(".canvas");
      // 获取webgl上下文
      const gl = canvas.getContext("webgl");
      // 初始化着色器程序对象
      const program = initShader(gl, vertex, fragment);

      // #region 绘制多个三角形.
      /*
       * 顶点数据
       * 数据结构：x, y, r, g, b, a
       [
       -1.0, 1.0, 0.0, 0.0, 1.0, 1.0, 
       -0.5, -1.0, 0.0, 0.0, 1.0, 1.0,
       -0.5, 1.0, 0.0, 0.0, 1.0, 1.0,
        0.0, -1.0,0.0, 0.0, 1.0, 1.0,
        0.0, 1.0,0.0, 0.0, 1.0, 1.0,
        0.5, -1.0,0.0, 0.0, 1.0, 1.0,
       ]

       */
      const vertices = new Float32Array([
        -1.0, 1.0, 0.0, 0.0, 1.0, 1.0, -0.5, -1.0, 0.0, 0.0, 1.0, 1.0, -0.5, 1.0, 0.0, 0.0, 1.0,
        1.0, 0.0, -1.0, 0.0, 0.0, 1.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, 0.5, -1.0, 0.0, 0.0, 1.0,
        1.0,
      ]);
      // 创建缓冲区对象
      const buffer = gl.createBuffer();
      // 绑定缓冲区
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
      // 创建并初始化了 Buffer 对象的数据存储区
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
      // 修改aPosition
      const aPositionIndex = gl.getAttribLocation(program, "aPosition");
      gl.vertexAttribPointer(
        aPositionIndex,
        2,
        gl.FLOAT,
        false,
        6 * Float32Array.BYTES_PER_ELEMENT,
        0,
      );
      gl.enableVertexAttribArray(aPositionIndex);
      // 修改aColor
      const aColorIndex = gl.getAttribLocation(program, "aColor");
      gl.vertexAttribPointer(
        aColorIndex,
        4,
        gl.FLOAT,
        false,
        6 * Float32Array.BYTES_PER_ELEMENT,
        2 * Float32Array.BYTES_PER_ELEMENT,
      );
      gl.enableVertexAttribArray(aColorIndex);
      // #endregion 绘制多个三角形.

      // 绘制多个三角形.
      // gl.drawArrays(gl.POINTS, 0, 6);
      // gl.drawArrays(gl.LINE_STRIP, 0, 6);
      // gl.drawArrays(gl.LINE_LOOP, 0, 6);
      // gl.drawArrays(gl.LINES, 0, 6);
      // gl.drawArrays(gl.LINES, 0, 6);
      // gl.drawArrays(gl.TRIANGLE_STRIP, 0, 6);
      gl.drawArrays(gl.TRIANGLE_FAN, 0, 6);
      // gl.drawArrays(gl.TRIANGLES, 0, 6);
    </script>
  </body>
</html>
